<template>
	<basic-container>
		<avue-crud :option="option" :data="data" v-model="form" :page="page" ref="crud"
		 :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
		 @size-change="sizeChange" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" @on-load="onLoad">
			<template slot-scope="{row}" slot="detailForm">
				<detail :isView="isView" :orderCode="form.code" @closeMoule="closeMoule">
				</detail>
			</template>
			<template slot-scope="scope" slot="menu">
				<el-button type="text" size="small" icon="el-icon-view" v-if="permission.order_view" @click.stop="handleView(scope.row,scope.index)">查看</el-button>
				<el-button type="text" size="small" icon="el-icon-edit" v-if="permission.order_edit && (scope.row.status==0||scope.row.status==7)"
				 @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
				<el-button type="text" size="small" icon="el-icon-delete" v-if="permission.order_delete" @click.stop="rowDel(scope.row)">删除</el-button>
				<el-button type="text" size="small" icon="el-icon-circle-check" v-if="permission.order_audit && scope.row.status==1"
				 @click="isAudit=false;dialogFormVisible = true;form.id=scope.row.id">审核</el-button>
			</template>
			<template slot="menuRight">
				<el-radio-group @change="searchReset" v-model="status" size="small" style="margin-right: 50px;">
					<el-radio-button label="">所有</el-radio-button>
					<el-radio-button :label="item.sort" v-for="(item,i) in statusItem" :key="i">{{item.name}}</el-radio-button>
				</el-radio-group>
			</template>
			<template slot-scope="{row}" slot="status">
				<el-tag v-for="(item,i) in statusItem" :key="i" :type="item.code" v-if="item.sort == row.status">{{item.name}}</el-tag>
			</template>
			<template slot-scope="scope" slot="menuForm">
				<el-switch style="margin-left: 10px;" v-model="form.status" active-text="提交" inactive-text="暂存">
				</el-switch>
			</template>
		</avue-crud>
		<el-dialog title="审核原因" :visible.sync="dialogFormVisible" v-if='dialogFormVisible' :modal-append-to-body='false'>
			<el-form>
				<el-form-item>
					<el-input v-model="form.reason" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-switch style="margin-right: 30px;" v-model="isAudit" active-text="通过" inactive-text="驳回">
				</el-switch>
				<el-button type="primary" @click="submitAudit()">确 定</el-button>
			</div>
		</el-dialog>
	</basic-container>
</template>

<script>
	import request from '@/router/axios';
	import detail from './orderDetail.vue'
	import {
		mapGetters
	} from "vuex";
	import {
		getCodes
	} from "@/api/system/dict";

	export default {
		components: {
			detail
		},
		data() {
			return {
				isAudit: false,
				dialogFormVisible: false,
				isView: false,
				status: "",
				statusItem: [],
				form: {
					status: 0
				},
				query: {},
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 0
				},
				option: {
					searchMenuSpan: 4,
					border: true,
					index: true,
					refreshBtn: false,
					editBtn: false,
					delBtn: false,
					excelBtn: true,
					menuWidth: '180px',
					column: [{
							label: "编号",
							prop: "code",
							width: "150px",
						display:false,
							disabled: true,
							placeholder: "系统自动生成"
						}, {
							label: "危废名称",
							prop: "wasteName",
							searchPlaceholder: '名称&编号',
							search: true
						}, {
							label: "产废单位",
							prop: "organization",
							filterable: true,
							search: true,
							type: "select",
							dicData: [],
							props: {
								label: "name",
								value: "code"
							}
						}, {
							label: "危废代码",
							prop: "wasteCode"
						}, {
							label: "危废类别",
							searchSpan: 4,
							prop: "category",
							search: true,
							multiple: true,
							filterable: true,
							type: "select",
							dicData: [],
							props: {
								label: "name",
								value: "sort"
							}
						}, {
							label: "状态",
							prop: "status",
							width: "80px",
							slot: true,
							display: false
						}, {
							label: "创建日期",
							prop: "createdOn",
							type: "date",
							format: "yyyy-MM-dd",
							display: false,
							width: "100px"
						}, {
							label: "备注",
							prop: "remark",
							hide: true
						}, {
							label: "详情",
							prop: "detail",
							formslot: true,
							labelslot: true,
							errorslot: true,
							span: 24,
							hide: true
						}, {
							label: '审核人',
							prop: 'auditedBy',
							addDisplay: false,
							editDisplay: false,
							hide: true
						},
						{
							label: '审核时间',
							prop: 'auditedOn',
							type: "datetime",
							addDisplay: false,
							editDisplay: false,
							hide: true
						},
						{
							label: '审核原因',
							prop: 'reason',
							addDisplay: false,
							editDisplay: false,
							hide: true,
							span: 24
						}
					]
				},
				data: []
			};
		},
		computed: {
		},
		created() {
			getCodes('c339a787-dce5-4db0-aafd-c1a14dc09072').then(res => {
				this.findObject(this.option.column, 'category').dicData = res.data.data;
			});
			getCodes('51b223eb-73de-428c-bea7-98d85918302d').then(res => {
				this.statusItem = res.data.data;
				console.log(this.statusItem)
			});
			request({
				url: '/api/WmsOrganization/getpages',
				method: 'get',
				params: {
					limit: 0
				}
			}).then(res => {
				this.findObject(this.option.column, 'organization').dicData = res.data.data;
			});
		},
		methods: {
			submitAudit() {
				if (this.form.reason == undefined) {
					if (!this.isAudit) {
						this.$message.warning("驳回时请输入原因！");
						return false;
					}
				}
				request({
					url: '/api/WmsOrder/audit',
					method: 'post',
					params: {
						id: this.form.id,
						isAudit: this.isAudit,
						reason: this.form.reason,
					}
				}).then(() => {
					this.onLoad(this.page);
				});
				this.dialogFormVisible = false;
			},
			beforeOpen(done, type) {
				if (["view"].includes(type)) {
					this.isView = true;
				} else if (["edit"].includes(type)) {
					this.isView = false;
				} else if (["add"].includes(type)) {
					this.form.status = false;
				}
				done();
			},
			handleView(row, index) {
				this.$refs.crud.rowView(row, index);
			},
			handleEdit(row, index) {
				this.$refs.crud.rowEdit(row, index);
			},
			closeMoule(e) {
				this.form.details = e;
			},
			rowSave(row, loading, done) {
				row.status = row.status ? 1 : 0;
				row.category = row.category == '' ? '' : row.category.join(",")
				request({
					url: '/api/WmsOrder/add',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
					done();
				}, error => {
					done();
					console.log(error);
				});
			},
			rowUpdate(row, index, loading) {
				row.status = row.status ? 1 : 0;
				row.category = row.category == '' ? '' : row.category.join(",")
				return request({
					url: '/api/WmsOrder/edit',
					method: 'post',
					data: row
				}).then(() => {
					loading();
					this.onLoad(this.page);
				});
			},
			rowDel(row) {
				console.log(row)
				if (row.status == 1) {
					this.$message.warning("该记录无法删除！");
					return false;
				}
				this.$confirm("确定数据删除?")
					.then(() => {
						return request({
							url: '/api/WmsOrder/remove',
							method: 'post',
							params: {
								ids: row.id
							}
						});
					})
					.then(() => {
						this.onLoad(this.page);
					});
			},
			searchReset() {
				this.query = {};
				this.page.currentPage = 1;
				this.onLoad(this.page);
			},
			searchChange(params, done) {
				this.page.currentPage = 1;
				this.query = params;
				this.onLoad(this.page);
				done();
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			onLoad(page) {
				request({
					url: '/api/WmsOrder/getpages',
					method: 'get',
					params: {
						key: this.query.wasteName == undefined ? '' : this.query.wasteName,
						type: this.query.organization == undefined ? '' : this.query.organization,
						status: this.status == undefined ? '' : this.status,
						time: this.query.category == undefined ? '' : this.query.category,
						page: page.currentPage,
						limit: page.pageSize
					}
				}).then(res => {
					const data = res.data
					data.data.forEach(ele => {
						if (ele.category != null) {
							var dataStrArr = ele.category.split(",");
							ele.category = [];
							dataStrArr.forEach(function(data) {
								ele.category.push(+data);
							});
						}
					});
					this.data = data.data;
					this.page.total = data.remark;
				});
			}
		}
	};
</script>
